<template>
	<view class="login_page">
		<view class="logo_box">
			
		</view>
		<view class="login_box">
			<view class="box_title">
				<text>登录</text>
				<text class="bottom_bar"> </text>
			</view>
			<view class="form_line">
				<input type="text" id="username" class="input" v-model="form.username" 
				@focus="focusStatus.username=true" @blur="focusStatus.username=false"/>
				<text class="form_line_bar"
				:class="{'form_line_bar_has': form.username||focusStatus.username}"></text>
				<label for="username" class="label" :class="{'has_style': form.username||focusStatus.username}">
					账号
				</label>
			</view>
			<view class="form_line">
				<input type="password" id="password" class="input" v-model="form.password" 
				@focus="focusStatus.password=true" @blur="focusStatus.password=false"/>
				<text class="form_line_bar"
				:class="{'form_line_bar_has': form.password||focusStatus.password}"></text>
				<label for="password" class="label" :class="{'has_style': form.password||focusStatus.password}">
					密码
				</label>
			</view>
			<view class="code_line" v-if="false">
				<view class="form_line">
					<input type="text" id="code" class="input" v-model="form.code" 
					@focus="focusStatus.code=true" @blur="focusStatus.code=false"/>
					<text class="form_line_bar"
					:class="{'form_line_bar_has': form.code||focusStatus.code}"></text>
					<label for="code" class="label" :class="{'has_style': form.code||focusStatus.code}">
						验证码
					</label>
				</view>
				<view class="btn" @click="getPhoneCodeFn" :class="{'disable_style':alreadySend}">
					<text v-if="!alreadySend">发送验证码</text>
					<text v-else>{{ timeNum }} s</text>
				</view>
			</view>
			
			<u-button text="登录" class="submit_btn"
			:loading='loading' loadingText='登录中...' @click="loginFn"></u-button>
			
			<u-toast ref="uToastRef"></u-toast>
		</view>
	</view>
</template>

<script setup>
	import { reactive, toRefs, ref, onMounted } from 'vue';
	import { LoginAPI, getCodeImgAPI, getUserInfoAPI } from '@/api/index.js'
	
	const uToastRef = ref(null)
	
	const data = reactive({
		form:{
			username: "", // 手机号
			password: "", //密码
			code: "", // 验证码
			uuid: "",
		},
		focusStatus:{
			username: false,
			password: false,
			code: false,
		},
		timeNum: 59, // 发送倒计时
		alreadySend: false, //是否已经发送验证码
		loading: false, //登录状态
	})
	
	let { form, focusStatus, timeNum, alreadySend, loading } = toRefs(data)
	
	
	/** 登录 */
	async function loginFn() {
		loading.value = true
		const res = await LoginAPI({
			username: form.value.username,
			password: form.value.password,
			uuid: form.value.uuid,
		})
		if(res.code!==200) {
			uToastRef.value.show({
				type: 'info',
				message: res.msg
			})
			loading.value = false
			return
		}
		let data = res.data
		uni.setStorageSync("token", data.access_token)
		uni.setStorageSync("client_id", data.client_id)
		const result = await getUserInfoAPI()
		if(result.code != 200) {
			return
		}
		let a = result.data.user
		console.log(a)
		uni.setStorageSync("userInfo", result.data.user)
		uni.switchTab({
			url:"/pages/receive/receive"
		})

		loading.value = false
	}
	
	async function getCodeImgFn() {
		const res = await getCodeImgAPI()
	}
	
	onMounted(()=>{
		getCodeImgFn()
	})
	
</script>

<style lang="scss" scoped>
.login_page {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	color: #1f1f1f;
	font-size: 32rpx;
	.logo_box {
		width: 200rpx;
		height: 200rpx;
		background-color: #f55282;
	}

	.login_box {
		width: 100%;
		min-height: 100rpx;
		padding: 0  74rpx;
		margin-top: 34rpx;
		.box_title {
			width: 100%;
			font-size: 40rpx;
			position: relative;
			padding-bottom: 8rpx;
			letter-spacing: 2rpx;
			font-size: 500;
			.bottom_bar {
				display: block;
				background-color: $uni-color-theme;
				position: absolute;
				width: 64rpx;
				height: 4rpx;
				bottom: 0;
				left: 8rpx;
			}
		}
		.form_line {
			width: 100%;
			position: relative;
			margin-top: 70rpx;
			height: 64rpx;
			border-bottom: 1rpx solid $uni-color-border;
			.input {
				width: 100%;
				height: 60rpx;
				z-index: 1;
				position: relative;
			}
			.label{
				position: absolute;
				top: 0;
				left: 0;
				color: #999;
				transition: 0.3s;
				font-size: 400;
				z-index: 0;
			}
			.has_style {
				top: -40rpx;
				color: #1f1f1f;
				font-weight: 500;
			}
			.form_line_bar {
				width: 0rpx;
				height: 4rpx;
				background-color: $uni-color-theme;
				position: absolute;
				bottom: -2rpx;
				left: 50%;
				transform: translateX(-50%);
				transition: 0.3s;
			}
			.form_line_bar_has {
				width: 100%;
			}
		}
		.code_line {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 70rpx;
			.btn {
				width: 186rpx;
				height: 72rpx;
				background-color: $uni-color-theme;
				margin-left: 54rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 28rpx;
			}
			.disable_style {
				background-color: #f1f1f1;
				text{
					color: #999;
				}
			}
			.form_line {
				flex: 1;
				margin-top: 0;
			}
		}
		.submit_btn {
			margin-top: 92px;
			background-color: $uni-color-theme;
			color: #fff;
			height: 92rpx;
		}
	}
}
</style>